import React, { useState } from 'react';
import './Summary.css';
import { Button, message } from 'antd';
import { WechatOutlined, AlipayOutlined, CreditCardOutlined, MoneyCollectOutlined } from '@ant-design/icons';
import Payment from './Payment';

const SummaryArea = ({ productCount, totalPrice, onClearCart }) => {
  const [paymentMethod, setPaymentMethod] = useState('wechat');
  const [paymentVisible, setPaymentVisible] = useState(false);

  const handlePaymentChange = (method) => {
    setPaymentMethod(method);
  };

  const openPayment = () => {
    if (productCount === 0) {
      message.warning('请先添加商品');
      return;
    }
    setPaymentVisible(true);
  };

  return (
    <div className='summary'>
      <div className="tit">商品汇总</div>
      <div className="summary-data">
        <div className="summary-item">
          <span className="summary-label">商品总数</span>
          <span className="summary-value">{productCount}件</span>
        </div>
        <div className="summary-item">
          <span className="summary-label">总价</span>
          <span className="summary-value">¥{totalPrice.toFixed(2)}</span>
        </div>
        <div className="payment-method">
          <div className="payment-label">支付方式</div>
          <div className="payment-buttons">
            <Button 
              className={`payment-option ${paymentMethod === 'wechat' ? 'active' : ''}`}
              onClick={() => handlePaymentChange('wechat')}
            >
              <WechatOutlined style={{ color: '#07C160', marginRight: 8, fontSize: '24px' }} />
              微信支付
            </Button>
            <Button 
              className={`payment-option ${paymentMethod === 'alipay' ? 'active' : ''}`}
              onClick={() => handlePaymentChange('alipay')}
            >
              <AlipayOutlined style={{ color: '#1677FF', marginRight: 8, fontSize: '24px' }} />
              支付宝支付
            </Button>
            <Button 
              className={`payment-option ${paymentMethod === 'bank' ? 'active' : ''}`}
              onClick={() => handlePaymentChange('bank')}
            >
              <CreditCardOutlined style={{ color: '#722ED1', marginRight: 8, fontSize: '24px' }} />
              银行卡支付
            </Button>
          </div>
        </div>
      </div>
      <div className="pay">
        <Button 
          className="payment-button"
          onClick={openPayment}
          onKeyDown={(e) => {
            if (e.key === 'Enter') {
              e.preventDefault();
            }
          }}
        >
          去支付
        </Button>
      </div>

      <Payment
        visible={paymentVisible}
        onClose={() => setPaymentVisible(false)}
        totalPrice={totalPrice}
        paymentMethod={paymentMethod}
        onPaymentSuccess={onClearCart} // 传递清空购物车的回调
      />
    </div>
  );
};

export default SummaryArea;